<template>
  <div>
    <el-main>
      <h2 v-if="type==1">
        <div style="width:500px;height: ; center; margin:0 auto;">
          <h4>{{username}}</h4>
          <form style="align-items: center;" method="post">
            <table>
              <tr>
                <td>
                  <label>头像上传：</label>
                </td>
                <td>
                  <el-upload class="avatar-uploader" action="http://localhost:80/Account/updatetp" ref="image"
                    :show-file-list="false" :on-success="imgurlSuccess" :on-change="changeImage" :before-upload="beforeAvatarUpload">
                    <img v-if="imgUrl" :src="imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </td>
              </tr>
            </table>
          </form>
          <div>
            <el-form ref="form" :model="user" :rules="rules" label-width="100px">
              <!-- <el-form-item label="旧密码:" prop="oldPassword">
                <el-input v-model="user.oldPassword" type="password" placeholder="请输入旧密码"></el-input>
              </el-form-item> -->
              <el-form-item label="新密码:" prop="newPassword">
                <el-input v-model="user.newPassword" type="password" placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="confirmPassword">
                <el-input v-model="user.confirmPassword" placeholder="请确认密码" type="password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="success" @click="submit">确认修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </h2>
    </el-main>
  </div>
  </div>
</template>

<script>
  let _this;
  export default {
    created() {
      _this = this;
      this.usid = localStorage.getItem("usid");
      this.toux();
    },
    data() {
      const equalToPassword = (rule, value, callback) => {
        if (this.user.newPassword !== value) {
          callback(new Error("密码不一致"));
        } else {
          callback();
        }
      };
      return {
        activeIndex: "1",
        oldimgUrl: "",
        type: 1,
        username: "",
        imgUrl: '',
        usid: "",

        test: "1test",
        user: {
          /* oldPassword: undefined, */
          newPassword: undefined,
          confirmPassword: undefined,
          url: "",
        },
        changeType: false,
        rules: {
          /* oldPassword: [{
            required: true,
            message: "旧密码不能为空",
            trigger: "blur"
          }], */
          newPassword: [{
              required: true,
              message: "新密码不能为空",
              trigger: "bulr"
            },
            {
              min: 6,
              max: 20,
              message: "长度在6-20个字符",
              trigger: "blur"
            }
          ],
          confirmPassword: [{
              required: true,
              message: "确认密码不能为空",
              trigger: "bulr"
            },
            {
              required: true,
              validator: equalToPassword,
              trigger: "blur"
            }
          ]
        }
      };
    },
    methods: {
      changeImage() {
        _this.changeType = true;
      },
      submit() {
        if (_this.changeType) {
          _this.$refs.image.submit();
          this.tijiao()
        } else if(_this.user.newPassword!=null){
            _this.$axios.post("/Account/updatemima", {
                usid: _this.usid,
                uspass: _this.user.newPassword
              })
              .then(function(param) {
                console.log(param)
                if (param.data = "okk") {
                  alert("修改密码成功！")
                }
              }).catch(function(err) {
                console.log(err)
              })
          }else{
            alert("无改动")
          }
        },
      tijiao() {
        if (_this.user.newPassword == undefined) {
          alert("修改成功")
          _this.$axios.post("/Account/deupdateuspass", {
              usid: _this.usid,
              newurl: _this.imgUrl,
              oldurl: _this.oldimgUrl
            })
            .then(function(param) {
              console.log(param)
            }).catch(function(err) {
              console.log(err)
            })
        } else {
          _this.$axios.post("/Account/updateuspass", {
              usid: _this.usid,
              uspass: _this.user.newPassword,
              newurl: _this.imgUrl,
              oldurl: _this.oldimgUrl
            })
            .then(function(param) {
              console.log(param)
            }).catch(function(err) {
              console.log(err)
            })
        }
      },
      toux() {
        _this.$axios.post(
          "/Account/toux", {
            usid: _this.usid,
          },
        ).then(function(param) {
          console.log(param)
          _this.imgUrl = param.data
          _this.oldimgUrl = param.data
        }).catch(function(err) {
          console.log(err)
        })
      },
      imgurlSuccess(res, file) {
        console.log("成功回调");
        console.log(res)
        _this.imgUrl = res;
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleAvatarSuccess(res, file) {
        console.log("成功" + res)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
    }
  }
</script>

<style>
  .el-header,
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 100%;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  .el-container {
    height: 100%;
  }

  .totle {
    margin-left: 1200px;
  }

  .el-header {
    padding: 0;
  }

  .demo {
    height: 100%;
    width: 100%;
  }

  .deli {
    display: inline-flex;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
